<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾融网络银行登录界面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>

        body {
            overflow: hidden;
        }

        * {
            margin: 0;
            font-family:"Microsoft Yahei";
            color: #666;
        }
        .login_banner{
            width: 480px;
            height: 640px;
            position: absolute;
            top: 40px;
            right: 500px;
            background: rgba(255, 255,255, 0.7);
            border-radius: 16px;
        }
        /*#login_background{
            width: 800px;
            height: 600px;
        }*/
        #l_content{
            position: relative;
            left: 100px;
            top: 80px;
        }

        #content{
            position: relative;
            left: 50px;
            top: 120px;
        }
        .form{
            position: relative;
            left: 60px;
            top: 20px;
        }
        .form a{
            text-decoration: none
        }
        .form .txt{
            width: 180px;
            height: 20px;
        }



    </style>
    <script>
        $(function (){
            //切换验证码
            $("#code_img").click(function (){
                $("#code_img").attr("src","http://localhost:8080/kaptcha.jpg")
            })
            //登录
            $("#sub_btn").click(function (){
                //获取数据
                var phone=$("#phone").val();
                var pwd=$("#pwd").val();
                var code=$("#code").val();
                var reg = /^1[3-9][0-9]{9}$/;
                if(phone==""||phone==null){
                    alert("手机号不可为空");
                    return;
                }
                if(!reg.test(phone)){
                    alert("手机号格式不正确");
                    return;
                }
                if(pwd==""){
                    alert("密码不可为空");
                    return;
                }
                if(code==""){
                    alert("验证码不可为空");
                    return;
                }
                $.ajax({
                    url:"/userServlet",
                    type:"post",
                    data:{action:"login",phone:phone,pwd:pwd,code:code},
                    dataType:"json",
                    success:function (d){
                        if(d.code==1){
                            location.href="http://localhost:8080/pages/user/index.html";
                        }else {
                            alert(d.msg);
                        }

                    }
                })
            })
        })
    </script>
</head>
<body>
    <div id="login_background">
      <img class="login_img" alt="" src="/static/img/login.jpg" >
    </div>
    <div class="login_banner">
        <div id="l_content">
            <h1>欢迎您来到网上银行</h1>
            <!--<span class="login_word">欢迎登录</span>-->
        </div>

        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="form">
                            <label>用户账号：</label>
                            <input class="txt" type="text" placeholder="请输入手机号账号"
                                   autocomplete="off" tabindex="1" name="username" id="phone" />
                            <!--获取回显的用户名-->
                            <br />
                            <br>
                            <br>
                            <label>用户密码：</label>
                            <input class="txt" type="password" placeholder="请输入密码"
                                   autocomplete="off" tabindex="1" name="password" id="pwd"/>
                            <br>
                            <br>
                            <br>
                            <label>验证码：</label>
                            <input class="txt" type="text" name="code" style="width: 100px;height: 20px" id="code" placeholder="请输入验证码"/>
                            <img id="code_img" alt="" src="/kaptcha.jpg" style="position: relative;left: 3px; top: 10px; width: 90px;height: 40px;">
                            <br>
                            <br>
                            <br>
                            <input type="button" value="登录" id="sub_btn"  style="width: 200px;height: 40px;position: relative;left: 40px;border-radius: 16px;"/>
                            <br>
                            <br>
                            <br>
<!--                            <a href="/pages/user/register.html" style="position: relative;left: 90px">还未注册?</a>-->
                        <a href="http://localhost:8080/pages/user/register.html" style="position: relative;left: 90px">还未注册?</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>